<template>
	<div class="dayCommentsBox">
		<header>
			<div class="back" @click="dayCommentsBack" v-if="weixin"></div>
			<p>{{featureInfo.name}}</p>
		</header>
		<div class="banner-box">
			<div class="banner">
				<swiper :options="swiperOption" class="sw">
					<swiper-slide v-for="(v,index) in imgArray" :key="index"><img @click="imgclick(index)" :src="v + '?x-oss-process=image/resize,m_fixed,h_350,w_750'" /></swiper-slide>
					<div class="swiper-pagination" slot="pagination"></div>
				</swiper>
				<div class="refer-top">
					<div class="refer-icon1"></div>
					<p class="refer-zx">汇评资讯</p>
				</div>
			</div>
		</div>
		<ul class="connect-box">
			<li v-for="(v,index) of connectData">
				<div class="connect-box-header">
					<div class="connect-box-header-icon"></div>
					<div class="connect-box-header-time">{{v.newsTime | filtersNewsTime }}</div>
				</div>
				<div class="connect-box-text">
					<p class="connect-box-text1">{{v.content}}</p>
					<p>({{v.positional}}     {{v.reporter}})</p>
				</div>
				<div class="connect-box-video">
					<video controlslist="nodownload"  ref="videoPlay"  class="connect-box-videobg" webkit-playsinline="" playsinline="" controls="controls" :src="v.videoUrl" width="100%" :poster="v.imgUrl" style="object-fit: fill">
						<span>您的手机版本，网页版暂未能支持！</span>
					</video>
					<div class="videoCoverImg"  v-if="videoCoverImgIs != index">
						<img :src="v.imgUrl+'?x-oss-process=image/resize,m_fixed,h_424,w_750'"/>
						<div id="aliVideo" style="clear: both;" @click="clickVideo(index,v.id)"></div>
			        </div>
				</div>
			</li>
		</ul>
        <p v-if="moreNews" class="clickmore" @click="clickMore">{{moreNewsTip}}</p>
	</div>
</template>

<script>
	import fun from "../util/function";
	import wxApi from "../util/wxApi";
	export default {
		mixins: [wxApi],
		data() {
			return {
				imgArray: ["https://videozhonghang.oss-cn-hangzhou.aliyuncs.com/video/banner1-mrhp.jpg", "https://videozhonghang.oss-cn-hangzhou.aliyuncs.com/video/banner2-mrhp.png", "https://videozhonghang.oss-cn-hangzhou.aliyuncs.com/video/banner3-mrhp.png"],
				swiperOption: {
					autoplay: {
						delay: 5000,
						stopOnLastSlide: false,
						disableOnInteraction: false,
					},
					pagination: {
						el: '.swiper-pagination',
					},
				},
				connectData:[],
				weixin:window.terminal.weixin,
				curr_page:1,
				flag:true,
				moreNews:false,
				moreNewsTip:"点击加载更多",
				videoCoverImgIs:"Miss阮",
				commentsId:'',//url上面的id
				featureInfo:'',//
			};
		},
		  computed: {
		    isLoadIcon() {
		      if(this.$store.state.SysOrgInfo.icon && this.featureInfo != ''){
		         this.wxRegister(this.wxRegCallback);
		         return true
		      }else{
		         return false
		      }
		    }
		  },
		  watch:{
		    isLoadIcon(val,oldVal){

		    }
		  },
		created: function() {
			this.commentsId = this.$route.query.id;
		    this.$store.dispatch("hideNav");
			this.getNewData()
			this.dotNumPage()//页面打点
			this.getFeatureInfoData()
		},
		destroyed: function() {
			window.onscroll = null;
		},
		mounted:function () {
            let _this = this
		},
		methods: {
			getFeatureInfoData(){
				//请求特色频道信息id
				this.$http.get("/h5live/getTspdAlbum?zjId="+this.$route.query.id).then(
					res => {
						//console.log(res.data.data)
						if(res.data.code=='000000'){
                            this.featureInfo = res.data.data;
                            this.wxRegCallback()
						}else{
							console.log("接口报错")
						}

						}
					);
			},
		    wxRegCallback() {
		      let opstion = {
		        link:window.location.href+'&wxShare=1',
		        title: this.featureInfo.shareTitle || '【'+this.$store.state.SysOrgInfo.name+'】一起来看直播吧！', // 分享标题
		        desc:  this.featureInfo.shareDesc || "精彩直播，尽在"+this.$store.state.SysOrgInfo.name+"手机直播！", //分享描述
		        imgUrl: this.featureInfo.imagurlShare || this.$store.state.SysOrgInfo.icon,
		        success: function() {
		          //alert("分享成功");
		        },
		        error: function(e) {
		          //alert('分享失败:'+JSON.stringify(e))
		        }
		      };
		      this.ShareTimeline(opstion);
		    },
			dotNumPage(){//统计
				let _this = this;
				var argumentData = {
					sessionId: "featureId_"+_this.$route.query.id, //场次id
					streamType: 12, //视频类型：1-预告 2-直播 3-回看 10-全局统计 11-商品点击 12-页面
					actionValue: 1, //行为：1-进入 2-离开 3-点击播放 4-留言 5-点赞 6-关注 7-分享 8-开播 9-关播 10-最高峰值
					playSource:fun.getPlatform(),//微信 app 游客为web
					url:window.location.href,//当前的url
				};
				_this.$http.post("/h5live/recordData", argumentData, {
						headers: {
							"Content-Type": "application/json"
						}
					})
					.then(
						res => {
							//console.log(res)
						},
						err => {
							console.log(err);
						}
					);
			},
			dayCommentsBack(){
				this.$router.push(`/${this.$channel}/featureHome`)
			},
			clickVideo(index,id){
				this.videoCoverImgIs = index ;
				//this.$refs.videoPlay[index].play();
				//console.log(this.$refs.videoPlay.length )
				for(let i = 0 ; i < this.$refs.videoPlay.length;i++){
					this.$refs.videoPlay[i].pause();
				}
				this.$refs.videoPlay[index].currentTime = 1
				this.$refs.videoPlay[index].play()
				this.dotNum(id)//统计
			},
			dotNum(id){//统计
				let _this = this;
				var argumentData = {
					sessionId: "dayCommentsVideoId_"+id, //场次id
					streamType: 12, //视频类型：1-预告 2-直播 3-回看 10-全局统计 11-商品点击 12-页面
					actionValue: 1, //行为：1-进入 2-离开 3-点击播放 4-留言 5-点赞 6-关注 7-分享 8-开播 9-关播 10-最高峰值
					playSource:fun.getPlatform(),//微信 app
					url:window.location.href,//当前的url
				};
				_this.$http.post("/h5live/recordData", argumentData, {
						headers: {
							"Content-Type": "application/json"
						}
					})
					.then(
						res => {
							//console.log(res)
						},
						err => {
							console.log(err);
						}
					);
			},
			//点击加载更多
			clickMore(){
				let _this = this
				_this.curr_page++;
				_this.$http.get("/zh/getMrhp?p="+_this.curr_page+"&typeId="+_this.commentsId).then(res => {
						if(res.data.code == "000000") {
							_this.connectData = _this.connectData.concat(res.data.data);
							if(res.data.data.length=="0"){
								_this.moreNewsTip ="没有更多数据"
							}
						}
					})
					.catch(response => {
						console.log(response);
					});
			},
			imgclick(index) {
				//由于链接失效，代码隐藏
//				switch(index) {
//					case 0:
//						window.location.href = "https://openapi.boc.cn/erh/mobileHtml/html/news.html?newstype=HP&id=d392406d-1835-48b8-8b61-db4eae4adcf3&from=singlemessage&isappinstalled=0";
//						break;
//					case 1:
//						window.location.href = "https://openapi.boc.cn/erh/ecl/dist/index.html?id=1000031&from=singlemessage&isappinstalled=0#/etacticDetail?id=1000031";
//						break;
//					case 2:
//						window.location.href = "https://openapi.boc.cn/erh/ecl/dist/index.html?id=1000018&from=singlemessage&isappinstalled=0#/etacticDetail?id=1000018";
//						break;
//					default:
//						break;
//				}
			},
			//新闻数据
			getNewData() {
				this.$http.get("/zh/getMrhp?p="+this.curr_page+"&typeId="+this.commentsId).then(res => {
						if(res.data.code == "000000") {
							//console.log(res.data.data);
							if(res.data.data){
								this.moreNews = true;
								this.connectData = res.data.data
							}

						} else {

						}
					})
					.catch(response => {
						console.log(response);
					});
			}
	},
	filters:{
		filtersNewsTime:function (type) {
			return  type.substr(0,10)
		}
	}
}
</script>

<style scoped="scoped">

	.dayCommentsBox{
		padding-bottom: 200px;
	}
	.refer-top {
		width: 94%;
		height: 100px;
		line-height: 100px;
		margin: 0 auto;
	}

	.refer-icon1 {
		width: 54px;
		height: 54px;
		background: url(../assets/images/meiIcon1.png) no-repeat;
		background-size: 54px 54px;
		float: left;
		margin: 24px 0 0 0;
	}

	.refer-top p {
		float: left;
		line-height: 100px;
	}

	.banner-box {
		width: 750px;
		height: 450px;
		background: white;
	}

	.refer-zx {
		margin-left: 24px;
		color: #cc3738;
		font-weight: 700;
		font-size: 36px;
		line-height: 100px;
	}
	.clickmore{
		width: 750px;
		text-align: center;
		color: darkgray;
		font-size: 30px;
		margin-top: 50px;
	}
	/*	.refer-text{
		width: 94%;
		height: 144px;
		margin: 0 auto;
		background:#faf9f9 ;
		border-radius: 10px;
		font-size: 28px;
		color: #464646;
		text-indent:55px;
		line-height: 40px;
		letter-spacing: 1px;
		justify-content: center;
		box-shadow: 0px 5px  10px #f7f7f7,-5px 5px  10px #f7f7f7,5px 0px  10px #f7f7f7,-5px 0px  10px #f7f7f7;
}*/

	.sw {
		width: 750px;
		height: 350px;
	}

	.sw img {
		width: 750px;
		height: 350px;
	}

	.connect-box {
		margin-top: 20px;
	}

	.connect-box li {
		width: 750px;
		height: auto;
		border-radius: 20px;
		background: white;
		margin-bottom: 20px;
	}

	.connect-box li .connect-box-header {
		width: 750px;
		height: 62px;
		border-bottom: 2px solid #e1e1e1;
	}

	.connect-box-header-icon {
		width: 33px;
		height: 39px;
		background: url(../assets/images/iconhp.png) no-repeat;
		background-size: 33px 39px;
		float: left;
		margin: 10px 0 0 27px;
	}

	.connect-box-header-time {
		color: #0c0c0c;
		font-size: 28px;
		line-height: 62px;
		float: left;
		margin-left: 36px;
	}

	.connect-box-text p {
		width: 95%;
		margin: 0 auto;
		text-align: justify;
		font-size: 32px;
		color: #3c3c3c;
	}

	.connect-box-text1 {
		text-indent: 65px;
		padding-top: 20px;
		line-height: 36px;
		font-size: 32px;
		color: #3c3c3c;
	}
	.connect-box-video{
		position: relative;
		width: 750px;
		height: 424px;
	}
	.connect-box-videobg {
		width: 750px;
		height: 424px;
		border-radius: 20px;
		margin: 25px 0 25px 0;
	}
	.videoCoverImg{
		width: 750px;
		height: 424px;
		margin: 25px 0 25px 0;
		position: absolute;
		top: 0;
		left: 0;
	}
	.videoCoverImg img{
		width: 750px;
		height: 424px;
		border-radius: 20px;
	}
	#aliVideo{
		width: 130px;
		height: 130px;
		background: url(../assets/images/play.png) no-repeat;
		background-size: 130px 130px;
        position: absolute;
        top: 144px;
        left: 310px;
	}
	header {
		position: relative;
	}

	.back {
		width: 65px;
		height: 55px;
		background: url(../assets/images/iconsmall.png) no-repeat;
		background-size: 150px 150px;
		position: absolute;
		top: 20px;
		left: 40px;
	}

	header p {
		width: 100%;
		height: 80px;
		font-size: 36px;
		text-align: center;
		line-height: 80px;
		color: #333333;
	}
</style>
